<template>
  <div class="box">
    <div class="left">
      <ul>
        <li @click="changeType('男装')">男装</li>
        <li @click="changeType('品牌')">品牌</li>
        <li @click="changeType('球鞋')">球鞋</li>
        <li @click="changeType('女装')">女装</li>
        <li @click="changeType('高街')">高街</li>
        <li @click="changeType('服配')">服配</li>
        <li @click="changeType('包类')">包类</li>
        <li @click="changeType('美妆')">美妆</li>
        <li @click="changeType('生活')">生活</li>
        <li @click="changeType('数码')">数码</li>
        <li @click="changeType('潮玩')">潮玩</li>
        <li @click="changeType('潮童')">潮童</li>
        <li @click="changeType('好物')">好物</li>
      </ul>
    </div>
    <div class="shop-wrapper">
      <ClassifyNavListCon :type="type" />
    </div>
  </div>
</template>
<script>
import ClassifyNavListCon from "./ClassifyNavListCon";
export default {
  name: "ClassifyNavList",
  data: function() {
    return {
      type: "男装"
    };
  },
  components: {
    ClassifyNavListCon
  },

  methods: {
    changeType(t) {
      this.type = t;  
    }
  }
};
</script>


<style scoped>
.box {
  width: 100%;
  overflow-y: hidden;
  flex-direction: row;
}
.box .left {
  width: 25%;
  height: 518px;
  float: left;
  border-right: 1px solid #ccc;
}
.box .shop-wrapper {
  float: left;
  flex: 1;
  width: 75%;
  overflow-y: auto;
}
.box .left ul {
  width: 100%;
}
.box ul li {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  position: relative;
  margin-top: 10px;
}
.addclass {
  border-left: 4px solid red;
}
/* .box ul li:before{
    content: "";
    height: 24px;
    width: 4px;
    background-color: red;
    position: absolute;
    left: 0;
    top: 10px;
} */
</style>

